<template>
	<view>
		<u-subsection :list="list" :current="current" @change='changeCurrent'></u-subsection>
		<view v-if='current == 1'>
			<view class='product-list'>
				<u--form labelPosition="left" labelWidth='80px'>
					<u-form-item label="姓名">
						<u--input v-model="address.name" border="none"></u--input>
					</u-form-item>
					<u-line />
					<u-form-item label="联系电话">
						<u--input v-model="address.phone" border="none"></u--input>
					</u-form-item>
					<u-line />
					<u-form-item label="配送地址">
						<u--input v-model="address.address" border="none" ></u--input>
					</u-form-item>
					<u-line />
				</u--form>
			</view>
		</view>
		<view class='product-list'>
			<view v-if='store != "" && current == 0'>
				<u-cell-group>
					<u-cell title="提货门店" :value="store.name" :isLink='true' @click='show = true'></u-cell>
				</u-cell-group>
				<u-picker :show="show" :columns="stores" keyName='name' @cancel='show = false' @confirm='chooseStore'
					@close='show = false'></u-picker>
			</view>
			<u-divider text="产品信息"></u-divider>
			<u-row>
				<u-col span='6'>
					<view class='title'>产品</view>
				</u-col>
				<u-col span='4'>
					<view class='title'>单价</view>
				</u-col>
				<u-col span='2'>
					<view class='title'>数量</view>
				</u-col>
			</u-row>
			<u-line></u-line>
			<view v-for='item in carts'>
				<u-row>
					<u-col span='6'>
						<view class='title'>{{item.name}}({{item.specName}})</view>
					</u-col>
					<u-col span='3'>
						<view class='title'>{{item.price}}</view>
					</u-col>
					<u-col span='3'>
						<view class='title'>X{{item.quantity}}</view>
					</u-col>
				</u-row>
				<u-line></u-line>
			</view>
			<view style='padding-top:10px;color:#606266;'>
				合计：￥{{totalPrice}}
			</view>
		</view>
		<view style='padding:10px'>
			<u--textarea v-model="comment" placeholder="订单备注"></u--textarea>
		</view>
		<view class='footer'>
			<view style='padding: 10px'>
				<view style='padding-right:5px'>
					<u-button type='warning' text='支付' icon='rmb-circle-fill'
						@click='submit("wechat")'></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wechatPay from '@/utils/wechat-pay.js'
	export default {
		data() {
			return {
				list: ['门店自提', '送货上门'],
				current: 0,
				carts: [],
				totalPrice: 0,
				name: '',
				phone: '',
				address: {
					name: '',
					phone: '',
					address: ''
				},
				comment: '',
				show: false,
				store: '',
				stores: []
			}
		},
		onLoad() {
			this.request.get(`public/stores`, {
				'@filter': `entity.getStatus() == 1`
			}).then((res) => {
				if (res.data && res.data.length > 0) {
					console.log(this.stores)
					this.stores = [res.data]
					this.store = res.data[0]
				} else {
					uni.showModal({
						title: '',
						content: '无可核销门店',
						showCancel: false,
						success: () => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					})
				}
			})
		},
		onShow() {
			let token = uni.getStorageSync('api_token')
			if (token == '') {
				uni.showModal({
					title: '',
					content: '请先登录！',
					showCancel: false,
					success: () => {
						uni.redirectTo({
							url: '/pages/index/login'
						})
					}
				})
			} else {
				let carts = uni.getStorageSync('carts')
				if (carts != '') {
					this.carts = carts
					this.getTotalPrice()
				} else {
					uni.showModal({
						title: '',
						content: '购物车为空！',
						showCancel: false,
						success: () => {
							uni.switchTab({
								url: '/pages/products/index'
							})
						}
					})
				}
			}
		},
		methods: {
			changeCurrent(e) {
				this.current = e
			},
			chooseStore(e) {
				console.log(e)
				this.store = e.value[0]
			},
			getTotalPrice() {
				let totalPrice = 0
				for (let i of this.carts) {
					totalPrice += parseFloat(i.price) * parseInt(i.quantity)
				}
				this.totalPrice = totalPrice.toFixed(2)
			},
			submit(type) {
				uni.showLoading()
				let items = []
				for (let i of this.carts) {
					items.push({
						specification: i.specId,
						quantity: i.quantity
					})
				}
				let orderData = {
					store: this.store.id,
					items: items,
					comment: this.comment,
					verifier: this.store.user.id
				}
				this.request.post(`api/orders`, orderData).then((res) => {
					console.log('res.data')
					uni.removeStorageSync('carts')
					uni.removeTabBarBadge({
						index: 2
					})
					const invoiceId = res.data.invoice.id
					if (type == 'qrcode') {
						uni.navigateTo({
							url: `/pages/payment/pay-code?invoice=${invoiceId}`
						})
					}
					if (type == 'wechat') {
						wechatPay(invoiceId).then((res) => {
							uni.hideLoading()
							uni.showModal({
								title: '',
								content: '支付成功！',
								showCancel: false,
								success: () => {
									uni.switchTab({
										url: '/pages/orders/index'
									})
								}
							})
						}).catch((err) => {
							uni.hideLoading()
							uni.showModal({
								title: '',
								content: '支付失败，请重试',
								showCancel: false,
								success: () => {
									uni.switchTab({
										url: '/pages/orders/index'
									})
								}
							})
						})
					}

					if (type == 'unLine') {
						uni.navigateTo({
							url: `/pages/payment/bank-info?invoice=${invoiceId}`
						})
					}


				})
			}
		}
	}
</script>

<style>
	.title {
		color: #606266;
	}

	.product-list {
		padding: 10px;
		margin: 10px;
		border: solid #19be6b 1px;
		border-radius: 10px;
	}
</style>